<template>
    <component :is="FormItem" :Options="Options" v-model="InputValue" />
</template>
<script setup>
import { shallowRef, ref, onMounted, watch } from 'vue'
import StringVue from '../FormItem/Input.vue';
import NumberVue from '../FormItem/InputNumber.vue';
import SelectVue from '../FormItem/Select.vue';

const FormItemMapping = {
    String: StringVue,
    Number: NumberVue,
    Select: SelectVue,
}

const FormItem = shallowRef();
const InputValue = ref();

const props = defineProps(['Options', 'Value']);
const emit = defineEmits(['ChangeValue'])





onMounted(() => {
    FormItem.value = FormItemMapping[props.Options.FormType];
});

watch(() => props.Value.Value, (val) => {
    var FunString = new Function("val", "return val." + props.Options.Key);
    InputValue.value = FunString(val);
}, { immediate: true, deep: true });


if (props.Value.ParamsEvent.hasOwnProperty(props.Options.Key)) {
    watch(InputValue, (val) => {
        props.Value.Value[props.Options.Key] = val;
        props.Value.ParamsEvent[props.Options.Key](props.Value.Entity, val, props.Value.Value)
    })
}





// watch(Value, (val) => {
//     emit('ChangeValue', val, props.Item)
// })



</script>
<style lang="less" scoped>

</style>